<template>
    <view style="display: flex;flex-direction: column;align-items: center;margin-top: 20rpx;">
        <posterShow ref="posterShow"
            :backgroundUrl="posterObj.backgroundUrl"
            :qrCodeUrl="posterObj.qrCodeUrl"
            :avatarUrl="posterObj.avatarUrl"
            :name="posterObj.name"
            :telephone="posterObj.telephone"
            :showCard="posterObj.showCard"
            :qrCodeSize="posterObj.qrCodeSize"
            :qrCodeLeft="posterObj.qrCodeLeft"
            :qrCodeTop="posterObj.qrCodeTop"
            @success="onPosterSuccess"
            > 
        </posterShow>
                
        <view class="setContainer">
            <view class="title">
                海报名称
                <textarea :disabled="true"
                     class="text" auto-height="true" maxlength="-1" 
                     :value="posterObj.title">
                 </textarea>
            </view>
            <view class="line">
                
            </view>
            <view class="title">
                海报类型
                <view class="typeContainer">
                    #{{posterObj.posterTypeName||""}}
                    <!-- <image class="icon" src="../static/image/poster_icon_arrow_r.png" mode=""></image> -->
                </view>
            </view>
            <view class="title" 
				v-if="posterObj.posterTypeName&&posterObj.posterTypeName.length>0" 
				@click="gotoDetailPage">
                {{posterObj.posterTypeName||""}}详情
                <view class="typeContainer">
                    <view class="text-1line-ellipsis" style="max-width: 400rpx;color: #333333;">
                        {{posterObj.content||""}}
                    </view>                   
                    <image class="icon" src="../static/image/posterArrow.png" mode=""></image>
                </view>
            </view>

            <view class="line">
                
            </view>
            
            <view class="tabBottom" >          
                <view v-if="waitForPosterSuccess" class="right rightEn" @click="savePoster" >
                    <image class="icon" src="../static/image/icon_di_xiazai.png" mode=""></image>
                    下载海报
                </view>
                
                <view v-else class="right" >
                    海报制作中...
                </view>
            </view>
            
            <view class="bottom">
                
            </view>
        </view>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let that = null
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")
    import posterShow from "../components/poster/posterShow.vue"
    
    let POSTER_Attribute = {
        Task: 1
    }
    
    let typeMapPage = {
        periphery: '/pages/shop/material/project/traffic',
        product: '/pages/shop/material/project/building',
        house_type: '/pages/shop/material/project/unitTypeDetail',
        album: '/pages/shop/material/project/buildingAlbumDetail',
        note: '/pages/shop/material/project/myNoteDetail',
        video: '/pages/shop/material/project/buildingVideoDetail',
        card: '/pages/shop/myCard/index',
        article: '/pages/shop/article/articleDetail',
    }
    
    export default {
        components: {posterShow},
        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isSeller: state => state.userInfo.isSeller,
                avatarUrl: state => state.userInfo.avatarUrl,
                nickName: state => state.userInfo.nickName,
                telephone: state => state.userInfo.telephone,
                openId: state => state.userInfo.openId,
                employeeId: state => state.userInfo.employeeId,
                shopEmployee: state => state.userInfo.shopEmployee,
            }),
        },
        data() {
            return {
                posterObj:{
                    title:"",
                    backgroundUrl:"",
                    qrCodeUrl:"",
                    avatarUrl:"",
                    name:"",
                    telephone:"",
                    type:0, // 海报类型  0名片，1文章，2活动
                    typeValue:"",
                    qrCodeSize: 150,
                    qrCodeLeft:-1,
                    qrCodeTop:-1,
					showCard:false,
                },
                shareObj:{
                    scene:{},
                    isShowBtn: false,
                },
                
 
                posterAttribute: 0, // 0普通海报，1任务海报
                waitForPosterSuccess:false,
            }
        },
        onLoad(options) {
            that = this;
            if (options.id&&options.id.length>0){
                if (options.attribute&&(options.attribute==POSTER_Attribute.Task)){
                    that.posterAttribute = POSTER_Attribute.Task
                    that.getTaskPoster(options.id)
                }else{
                    that.getPoster(options.id)
                }
            }
            
            if (that.shopEmployee&&that.shopEmployee.employee){
                that.posterObj.name = that.shopEmployee.employee.realname
                that.posterObj.telephone = that.shopEmployee.employee.phone
                that.posterObj.avatarUrl = that.shopEmployee.employee.avatar
            }

        },
        
        methods: {
            setPosterObj(res){
                if ((that.posterAttribute == POSTER_Attribute.Task)&&(res.datas&&res.datas.scene)){
                    that.shareObj.scene = JSON.parse(res.datas.scene);
                    that.shareObj.isShowBtn = true;
                }
                
                that.posterObj.backgroundUrl = res.data.background;
                that.posterObj.qrCodeUrl = res.data.qrcodeImage;
                that.posterObj.title = res.data.name;
                that.posterObj.posterType  = res.data.posterType;
                that.posterObj.content = res.data.content;
                that.posterObj.posterTypeName = res.data.posterTypeName;
				that.posterObj.contentId = res.data.contentId;
                if (res.data.qrcodeSize>=0){
                    that.posterObj.qrCodeSize = res.data.qrcodeSize*2
                }
                if (res.data.qrcodeLeft>=0){
                    that.posterObj.qrCodeLeft = res.data.qrcodeLeft*2
                }
                if (res.data.qrcodeTop>=0){
                    that.posterObj.qrCodeTop = res.data.qrcodeTop*2
                }
                
           
				that.posterObj.activityType = res.data.activityType;
                if (res.data.showCard == 1){
                    that.posterObj.showCard = true
                }
				

                that.$refs.posterShow.freshCanvas(that.posterObj);
                
            },
            //====任务海报
            getTaskPoster(id){
                let that = this
                api.getTaskDetail({
                    interfaceName:id,
                    param: {
                    }
                }).then(res => {
                    console.log(res)
                    if (res.success) {
                        that.setPosterObj(res)
                    }else{
						uni.showToast({
							icon: "none",
							title:'海报制作,失败'
						})		
					}
                })
            },
            //===普通海报
            getPoster(id){
                let that = this
                api.getPoster({
                    interfaceName:id,
                    param: {
                    }
                }).then(res => {
                    console.log("getPoster:",res)
                    if (res.success) {
                        that.setPosterObj(res)
                    }else{
						uni.showToast({
							icon: "none",
							title:'海报制作,失败'
						})		
					}
                })
            },
            
            onPosterSuccess(){
                uni.hideLoading()
                this.waitForPosterSuccess = true;   
            },
            gotoDetailPage(){
				var activityType = that.posterObj.activityType
				if (that.posterObj.posterType == 'activity'){
					if (activityType == 1){
					    uni.navigateTo({
					        url: "/pages/shop/activity/activityLottery?id=" + that.posterObj.contentId
					    })
					}
					if (activityType == 2){
					    uni.navigateTo({
					        url: "/pages/shop/activity/activityGroupBuy?id=" + that.posterObj.contentId
					    })
					}
					if (activityType == 3){
					    uni.navigateTo({
					        url: "/pages/shop/activity/activityLike?id=" + that.posterObj.contentId
					    })
					}
					if (activityType == 4){
					    uni.navigateTo({
					        url: "/pages/shop/activity/activitySignUp?id=" + that.posterObj.contentId
					    })
					}
					if (activityType == 5){
					    uni.navigateTo({
					        url: "/pages/client/activity/activityCoupon?id=" + that.posterObj.contentId
					    })
					}
					if (activityType == 6){
					    uni.navigateTo({
					        url: "/pages/client/activity/activityHaggle?id=" + that.posterObj.contentId
					    })
					}
					if (activityType == 7){
						for (var key in this.redpacketPathMapMixins){
							var value = this.redpacketPathMapMixins[key];
							if (value == item.showType){
								uni.navigateTo({
								    url: "/" + key
								})
							}
						}
					}
					
				}else{
					var url = typeMapPage[that.posterObj.posterType]||''
					if (url&&url.length>0){
					    console.log("gotoDetailPage:", url)
					    uni.navigateTo({
					    	url: url + "?id="+that.posterObj.contentId
					    })
					}   
				}
           
            },
            savePoster(){
                this.$refs.posterShow.savePoster();
            }
        }
    }
</script>
<style>
    page{
        background-color: #F3F3F3;
    }
    
</style>
<style lang="scss">
    .setContainer{
        width: 750rpx;
        // height: 420rpx;
        background-color: #ffffff;
        padding-left: 28rpx;
        margin-top: 32rpx;
        .title{
            display: flex;
            align-items: center;
            font-size: 30rpx;
            color: #666666;
            margin-top: 41rpx;
            margin-bottom: 32rpx;
            
            .text{
                width: 450rpx;
                font-size: 30rpx;
                color: #333333;
                margin-left: 33rpx;
            }
            .typeContainer{
                display: flex;
                align-items: center;
                font-size: 30rpx;
                color: #16a5fe;
                margin-left: 33rpx;
                .type{
                    min-width: 60rpx;
                }
                .icon{
                    height: 22rpx;
                    width: 22rpx;
                    margin-left: 12rpx;
                }
            }
        }
        
  
        
        .line{
            width: 722rpx;
            height: 1px;
            background-color:  #e3e3e3;          
        }
        
        .tabBottom{
            margin-top: 50rpx;
            margin-bottom: 33rpx;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            .left{
                width: 300rpx;
                height: 88rpx;
                border-radius: 44rpx;
                border: solid 2rpx #16a5fe;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 32rpx;
                color: #16a5fe;
                margin-right: 30rpx;
                line-height: 88rpx;
                .icon{
                	width: 36rpx;
                	height: 36rpx;
                    margin-right: 10rpx;
                }    
            }
            .right{
                width: 360rpx;
                height: 88rpx;
                border-radius: 44rpx;
                display: flex;
                justify-content: center;
                background-color: #dddddd;
                align-items: center;
                font-size: 32rpx;
                color: #ffffff;
                line-height: 88rpx;
                .icon{
                	width: 36rpx;
                	height: 36rpx;
                    margin-right: 10rpx;
                }   
            }
            .rightEn{
                background-image: linear-gradient(
                    #16a5fe, 
                    #16a5fe), 
                linear-gradient(90deg, 
                    #24c9ff 0%, 
                    #349dee 100%);
                background-blend-mode: normal, 
                    normal;
            }
            
        }
        
        .bottom{
            width: 750rpx;
            height: 70rpx;
        }
    }

</style>
